<template>
<div>
<div style="padding:0px 0px 20px 0px">
<el-row>
  <el-col :span="12"><div class="grid-content bg-purple"><el-input
    placeholder="请输入内容"
    prefix-icon="el-icon-search"
    v-model="input2">
  </el-input></div></el-col>
  <el-col :span="12"><div class="grid-content bg-purple-light" style="text-align:right;">
  批量删除 | 批量停用
  <el-button type="warning">警告按钮</el-button></div></el-col>
</el-row>
</div>
<div>
</div>
  <el-table
    class="tableBox"
    ref="multipleTable"
    :data="tableData"
    tooltip-effect="dark"
    style="width: 100%;solid 2px #2e354a"
    @selection-change="handleSelectionChange">
    <el-table-column
      type="selection"
      width="55">
    </el-table-column>
    
    <el-table-column
      prop="name"
      label="角色名"
      width="120">
    </el-table-column>
    <el-table-column
      fixed="right"
      label="操作"
      width="100">
      <template slot-scope="scope">
        <el-button @click="setResource(scope.row.id)" type="text" size="small">资源配制</el-button>
        <el-button type="text" size="small">编辑</el-button>
      </template>
    </el-table-column>
  </el-table>

<el-dialog
  title="配制资源"
  :visible.sync="dialogVisible"
  width="80%">
  <span>
  <el-transfer v-model="value" :data="data"></el-transfer>
  </span>
  <span slot="footer" class="dialog-footer">
    <el-button @click="dialogVisible = false">取 消</el-button>
    <el-button type="primary" @click="dialogVisible = false">确 定</el-button>
  </span>
</el-dialog>

  </div>
</template>

<script>
  export default {
    data() {
      // const generateData = _ => {
      //   const data = [];
      //   for (let i = 1; i <= 15; i++) {
      //     data.push({
      //       key: i,
      //       label: `备选项 ${ i }`,
      //       disabled: i % 4 === 0
      //     });
      //   }
      //   return data;
      // };
      return {
        tableData: [],
        multipleSelection: [],
        setid:0,
        dialogVisible:false,
        data: [],
        value: []
      }
    },

    methods: {
      toggleSelection(rows) {
        if (rows) {
          rows.forEach(row => {
            this.$refs.multipleTable.toggleRowSelection(row);
          });
        } else {
          this.$refs.multipleTable.clearSelection();
        }
      },
      handleSelectionChange(val) {
        this.multipleSelection = val;
      },
      getRoles(){
        this.axios.get("roles").then(res=>{
            this.tableData = res.data.rolelist
        })
      },

      getResourceList(){
        this.axios.get("resource?roleid="+this.setid).then(res=>{
          this.data = res.data.reslist
          this.value = res.data.checklist
        })
      },
      setResource(id){
        //展示配制框
        this.setid = id
        //获取资源列表，获取此角色已经选择的资源列表
        this.getResourceList()
        this.dialogVisible = true
    
      }
    },
    
    mounted() {
      this.getRoles()
    },
  }
</script>
<style scoped>
.tableBox{
  border:solid 2px #f3f4f7;
}
</style>